<template>
    <a-form :model="form" :rules="rules"
        :label-col="{ style: { width: props.labelWidth ? props.labelWidth : '100px', textAlign: 'right' } }"
        ref="formRef" :wrapper-col="{ span: 14 }">
        <div v-for="(item, index) in props.formList" :key="index"
            :class="[item.component == 'textarea' ? 'aaarea' : '']">
            <a-form-item :label="item.component == 'isSend' ? '' : item.label" :name="item.name"
                v-if="item.show !== false">
                <div class="item">
                    <template v-if="item.component == 'input'">
                        <a-input :size="size" v-model:value="item.value" allowClear :disabled="item.disabled"
                            style="width: 100%;" :placeholder="getPlaceholer(item)" v-bind="item.attrs" />
                    </template>
                    <template v-if="item.component == 'datePicker'">
                        <a-date-picker :size="size" :date-format="item.format ? item.format : 'YYYY年MM月DD日'"
                            :format="item.format ? item.format : 'YYYY年MM月DD日'"
                            @change="() => item.bindMethods && item.bindMethods(item)"
                            :disabled-date="item.disabledDate ? (val) => disabledDate(val, item) : false"
                            :value-format="item.format ? item.format : 'YYYY年MM月DD日'" style="width: 100%;"
                            :disabled="item.disabled" v-model:value="item.value" :placeholder="getPlaceholer(item)"
                            :show-time="item.showTime ? { format: 'HH:mm', minuteStep: item.minuteStep ? item.minuteStep : 1 } : false" />
                    </template>
                    <template v-if="item.component == 'dateRange'">
                        <a-range-picker :size="size" :date-format="item.format ? item.format : 'YYYY年MM月DD日'"
                            format='YYYY年MM月DD日' value-format='YYYY年MM月DD日' v-model:value="item.value"
                            style="width: 100%;" :disabled="item.disabled" :placeholder="['开始时间', '结束时间']" />
                    </template>
                    <template v-if="item.component == 'cascader'">
                        <a-cascader :size="size" v-model:value="item.value" style="width: 100%;"
                            :disabled="item.disabled" :options="item.options" :placeholder="getPlaceholer(item)">
                            <template #displayRender="{ labels }" v-if="item.displayRender">
                                <span>{{ labels.join('-')?.replace("【", "")?.split('(')[0] }}</span>
                            </template>
                        </a-cascader>
                    </template>
                    <template v-if="item.component == 'textarea'">
                        <a-textarea :size="size" style="width: 100%;" v-model:value="item.value" showCount allowClear
                            :maxlength="item.maxlength ? item.maxlength : 1000" />
                    </template>
                    <template v-if="item.component == 'select'">
                        <a-select :size="size" :filter-option="filterOption" show-search
                            :mode="item.multiple ? 'multiple' : false" allowClear v-model:value="item.value"
                            :placeholder="getPlaceholer(item)" :options="item.options" :disabled="item.disabled">
                        </a-select>
                    </template>
                    <template v-if="item.component == 'radio'">
                        <a-radio-group class="mt-6px" :size="size" :disabled="item.disabled" v-model:value="item.value"
                            name="radioGroup" @change="radioChange(item)">
                            <a-radio :value="el.value" v-for="el in item.options" :key="el.label">{{
                                el.label }}</a-radio>
                        </a-radio-group>
                    </template>
                    <template v-if="item.component == 'isSend'">
                        <a-checkbox :disabled="item.disabled"
                            :style="{ marginLeft: props.labelWidth ? props.labelWidth : '100px' }"
                            v-model:checked="item.value">{{ item.label }}</a-checkbox>
                    </template>
                    <template v-if="item.component == 'checkbox'">
                        <a-checkbox-group class="mt-5px" :disabled="item.disabled" v-model:value="item.value"
                            :options="item.options" />
                    </template>
                </div>
            </a-form-item>
            <div v-show="item.tip" class="tip">{{ item.tip }}</div>
        </div>
    </a-form>
</template>

<script setup lang='ts'>
import { ref, watch, computed } from "vue";
import type { IndexFormItem } from "@/views/ApplicationDetails/application-type.ts"
import type { Rule } from 'ant-design-vue/es/form';
const props = defineProps(['formList', 'rules', "labelWidth", 'size']);
const formRef = ref<any>({})
const form = ref({});
const labelSize = ref<string>('32px')
const size = computed(() => {
    return props.size || ""
})
watch(() => size.value, (val) => {
    if (val) {
        labelSize.value = '40px'
    }
}, { immediate: true })
let rules: Record<string, Rule[]> = {
};
function clear() {
    formRef.value.clearValidate()
}

watch(() => props.formList, (val) => {
    const ruleMap = {}
    val.forEach((el: IndexFormItem) => {
        const isSelect = el.component == 'select' || el.component == 'cascader' || el.component == 'dateRange' || el.component == 'datePicker';
        const message = isSelect ? '请选择' + el.label : '请填写' + el.label
        ruleMap[el.name] = [{ required: el.required !== false, message, trigger: ['change', 'blur'] }]
        if (el.value && formRef.value) {
            formRef.value.clearValidate && formRef.value.clearValidate([el.name])
        }
        form.value[el.name] = el.value
    })
    rules = ruleMap;
}, { deep: true, immediate: true })

const submitForm = async () => {
    const flag = await formRef.value.validate()
    if (!flag) return;
    // formRef.value.resetFields();
    const tempData = JSON.parse(JSON.stringify(props.formList))
    // props.formList.forEach(el => el.value = '')
    return tempData
}

const getPlaceholer = (item: IndexFormItem): string => {
    if (item.component === 'select' || item.component == 'datePicker' || item.component == 'cascader') {
        return '请选择';
    }
    return '请输入' + item.label;
};
const filterOption = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const handleAreaClick = (e: Event, label: string, option: any) => {
    e.stopPropagation();
};

const emits = defineEmits(['radioChange'])
const radioChange = (val) => {
    emits('radioChange', val)
}
const disabledDate = (current: any, item) => {
    if (item.useDisabledFlag) {
        const a = props.formList.find(el => el.name == item.useDisabledFlag)
        if (a && a.value) {
            const time = a.value.split(' ')[1]?.split(":");
            return current && current < new Date(a.value).setHours(time[0] || 0, time[1] || 0, 0, 0)
        }
    }
    return current && current < new Date().setHours(0, 0, 0, 0);
};

defineExpose({ submitForm, clear })
</script>

<style lang="less" scoped>
:deep(.ant-form-item-required) {
    height: v-bind(labelSize) !important;
}

:deep(.ant-row) {
    display: flex;
}

:deep(.ant-col-14) {
    max-width: unset;
    flex: 1;

}

.item {
    display: flex;
    gap: 8px;
    position: relative;
    margin-bottom: 10px;
}

.tip {
    width: 480px;
    height: 84px;
    font-weight: 400;
    font-size: 14px;
    color: #B3C0C8;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.btn-area {
    display: flex;
    align-items: center;
    width: 470px;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;

}

.error-msg {
    position: absolute;
    color: red;
    font-size: 12px;
    top: 35px;
    left: -100px
}

.aaarea {
    :where(.css-dev-only-do-not-override-pz7vu8).ant-form-item {
        margin-bottom: 10px !important;
    }
}
</style>
